<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES6 扩展运算符 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES6 扩展运算符
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/08/16 16:19 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES6新特性</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<h2><a id="%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BB%8B%E7%BB%8D" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>扩展运算符介绍</h2>
<p><code>...</code>扩展运算符能将“数组”转换为逗号分隔的“参数序列”</p>
<pre class="line-numbers"><code class="language-js">//声明数组
const dsrteam = ['卡夫','铃','四个八'];

//声明函数
let l4d2 = () =&gt; {
    console.log(arguments);
}

l4d2(dsrteam); //输出一个数组['卡夫','铃','四个八']

l4d2(...dsrteam); //输出三个参数，等同于l4d2('卡夫','铃','四个八')
</code></pre>
<h2><a id="%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%E5%BA%94%E7%94%A8" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>扩展运算符应用</h2>
<h3><a id="%E6%95%B0%E7%BB%84%E7%9A%84%E5%90%88%E5%B9%B6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>数组的合并</h3>
<pre class="line-numbers"><code class="language-js">const dsr = ['kafu','me'];
const mga = ['su','kud'];

//ES5方法
const es5 = dsr.concat(mga);
console.log(es5); //输出['kafu','me','su','kud'];

//扩展运算符
const es6 = [...dsr, ...mga];
console.log(es6); //输出['kafu','me','su','kud']
</code></pre>
<h3><a id="%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%8B%E9%9A%86" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>数组的克隆</h3>
<pre class="line-numbers"><code class="language-js">const dsr = ['kafu','ling','me'];
const dsrteam = [...dsr];
</code></pre>
<p><strong>注：</strong> 若拷贝的数组元素包含<strong>引用类型数据</strong>（Array、Object、Function），则该元素是<strong>浅拷贝</strong>（拷贝指向对象的指针）</p>
<h3><a id="%E5%B0%86%E4%BC%AA%E6%95%B0%E7%BB%84%E8%BD%AC%E6%8D%A2%E4%B8%BA%E7%9C%9F%E6%95%B0%E7%BB%84" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>将伪数组转换为真数组</h3>
<pre class="line-numbers"><code class="language-js">const divs = document.querySelectorAll('div'); //DOM对象列表
console.log(divs); //输出伪数组

const divArr = [...divs];
console.log(divArr); //输出真数组
</code></pre>
<p><strong>伪数组：</strong> 与数组一样有<code>length</code>属性，但不是<code>Array</code>，实际是<code>Object</code>，如：<code>arguments</code>、<code>DOM</code>对象列表、<code>jQuery</code>对象等</p>
<h4><a id="%E4%BC%AA%E6%95%B0%E7%BB%84%E4%B8%8E%E7%9C%9F%E6%95%B0%E7%BB%84%E7%9A%84%E5%8C%BA%E5%88%AB" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>伪数组与真数组的区别</h4>
<ol>
<li>
<p>长度：</p>
<ul>
<li>真数组的长度是可变的</li>
<li>伪数组的长度是固定的</li>
</ul>
</li>
<li>
<p>方法的使用：</p>
<ul>
<li>真数组可以使用数组的API方法</li>
<li>伪数组不可以使用数组的API方法</li>
</ul>
</li>
</ol>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>